<!-- 任务处理结果查看 火警、故障、屏蔽-->
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandardDetail" :close-on-click-modal="false" title="查看" width="800px" height="300px" class="noMargin task">
      <div class="main">
        <ul class="main-list">
          <li><span class="label">事件：</span><span class="value">{{ form.task_name }}</span></li>
          <li><span class="label">时间：</span><span class="value">{{ form.task_start_at }}</span></li>
          <li><span class="label">单位：</span><span class="value">{{ form.corp_name }}</span></li>
          <li><span class="label">设备类型：</span><span class="value">{{ form.tname }}</span></li>
          <li><span class="label">设备名称：</span><span class="value">{{ form.mname }}</span></li>
        </ul>
        <ul class="secondary-list">
          <li v-if="form.task_name!=='屏蔽'&&form.task_name!=='故障'"><span class="label">处理结果：</span><span class="value">{{ form.result }}</span></li>
          <li v-if="form.task_name!=='屏蔽'"><span class="label">火警原因：</span><span class="value">{{ form.cause }}</span></li>
          <li><span class="label">备注：</span><span class="value">{{ form.remark ? form.remark : '' }}</span></li>
          <li><span class="label">处理人：</span><span class="value">{{ form.workerName }}</span></li>
          <li><span class="label">处理时间：</span><span class="value">{{ form.handle_start_at }}</span></li>
          <li class="img-list">
            <span class="label">现场图片：</span>
            <ul>
              <li v-if="form.img_1">
                <img :src="form.img_1">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(form.img_1)">
                  <i class="el-icon-zoom-in"/>
                </span>
              </li>
              <li v-if="form.img_2">
                <img :src="form.img_2">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(form.img_2)">
                  <i class="el-icon-zoom-in"/>
                </span>
              </li>
              <li v-if="form.img_3">
                <img :src="form.img_3">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(form.img_3)">
                  <i class="el-icon-zoom-in"/>
                </span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleImg">
      <img :src="dialogImageUrl" alt="" width="100%" >
    </el-dialog>
  </div>
</template>
<script>
import { tasksInfo } from '@/api/taskCenter'
import { parseTime } from '@/utils/index'
const statusTypeList = {
  1: '火警',
  2: '故障',
  3: '屏蔽',
  4: '巡检',
  5: '巡更',
  6: '隐患',
  7: '其他'
}
const resultTypeList = {
  1: '误报',
  2: '真实'
}
const causeTypeList = {
  1: '设备损坏',
  2: '作业扬尘',
  3: '维保测试',
  4: '施工不慎',
  5: '其他'
}
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    dialogForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisibleImg: false,
      form: {}
    }
  },
  created() {
    this.getDetailInfo()
  },
  methods: {
    getDetailInfo() {
      var params = {
        task_type: this.dialogForm.task_type,
        task_id: this.dialogForm.task_id
      }
      tasksInfo(params)
        .then(response => {
          if (response.data.code === 40000) {
            this.form = response.data.data
            this.form.imgList = []
            this.form.workerName = this.form.worker ? JSON.parse(this.form.worker).nickname : ''
            this.form.img_1 ? this.form.imgList.push(this.form.img_1) : ''
            this.form.img_2 ? this.form.imgList.push(this.form.img_2) : ''
            this.form.img_3 ? this.form.imgList.push(this.form.img_3) : ''
            this.form.task_name = statusTypeList[this.form.task_type]
            this.form.result = resultTypeList[this.form.result]
            this.form.cause = causeTypeList[this.form.cause]
            this.form.task_start_at = this.form.task_start_at ? parseTime(this.form.task_start_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
            this.form.handle_start_at = this.form.handle_start_at ? parseTime(this.form.handle_start_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
          } else {
            this.$message.warning(response.data.message)
          }
          console.log(response)
        })
        .catch((e) => {
        })
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url
      this.dialogVisibleImg = true
    },
    // 关闭弹窗
    handleCancelDetail() {
      this.$emit('getCancel')
    },
    // 关闭弹窗，不可以删这个方法。不用这个方法点击遮罩层关闭会报错
    handleCloseBindWarnStandardDetail() {
      this.$emit('closeBindWarnStandard')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.main{
  &>ul{
    overflow: hidden;
    border-top: 1px solid #D8D8D8;
    padding: 10px 30px;
    li{
      float: left;
      width: 33.3%;
      line-height: 35px;
      .label{
        color: #8F8D8D;
      }
      .value{
        color: #4A4A49;
        img{
          width:100px;
          height: 100px;
          display: inline-block;
        }
      }
    }
  }
  .secondary-list li{
    width: 100%;
  }
  .img-list{
    span{
      float: left;
    }
    ul{
      display: inline-block;
      padding-top:10px;
      li{
        float: left;
        width: 100px;
        margin-right: 10px;
        position: relative;
      }
      li:hover .el-upload-list__item-preview{
        opacity: 1;
      }
      img{
        width: 100px;
        height: 100px;
      }
    }
    .el-upload-list__item-preview{
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      left: 0;
      top: 0;
      cursor:pointer;
      text-align: center;
      color: #fff;
      float:none;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0,0,0,.5);
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
    }
  }
}
</style>
